<script lang="ts" setup>
/**
 * @ClassName appHome
 * @Description 应用首页
 * @Author xuyizhuo
 * @Date 2024/12/10 20:22
 */
import userStore from '@/store/modules/userStore'
import dayjs from 'dayjs'
import DataFormat from '@/utils/DataFormat'
import MessageUtil from '@/utils/MessageUtil'

console.log('dayjs().format()', dayjs().format('YYYY-MM-DD HH:mm:ss:SSS'))

const object = { a: [{ b: { c: 3 } }, 4] }
console.log('ObjectDefaultValue', DataFormat.getObjectDefaultValue(object, 'a[0].b.c')) // 结果：3
console.log('ObjectDefaultValue', DataFormat.getObjectDefaultValue(object, 'a')) // 获取a属性的值
console.log('now day = ', DataFormat.timeFormat(dayjs())) // now day =  2024-12-15 19:03

// 某些时候需要使用 storeToRefs() 解构才能获取到响应式的数据
const { userInfo, updateUserInfo } = userStore()

const onUpdate = () => {
    updateUserInfo()
    MessageUtil.notification('查询用户信息成功', '成功')
    MessageUtil.messageError('查询用户列表失败')
    setTimeout(() => {
        MessageUtil.notificationWarning('查询用户信息成功')
    }, 200)
}

/**
 * 窗口大小变化处理
 * @param {{width: number, height: number}} event
 */
const onWindowSizeUpdate = (event: { width: number; height: number }) => {
    console.log('窗口尺寸变化了', event)
}
</script>

<template>
    <div class="app-home">
        <h1>首页</h1>
        <div>用户名：{{ userInfo.uname }}</div>
        <el-button @click="onUpdate()">修改用户名</el-button>
        <el-button type="primary" @click="onUpdate()">修改用户名</el-button>

        <router-link to="/login">退出登录</router-link>
        <!--<router-link to="/admin">控制台</router-link>-->
        <el-button link type="primary" @click="$router.push('/admin')">控制台</el-button>

        <!--拖拽指令-->
        <div v-draggable>123430912301923</div>
        <!-- 窗口变化指令：v-resize -->
        <div v-resize="onWindowSizeUpdate">123430912301923</div>
        <!--加载中指令-->
        <!--<div v-loading="true">123430912301923</div>-->
    </div>
</template>

<style lang="scss" scoped>
.app-home {
    width: 100%;
    height: 100%;
    font-size: 20px;
}
</style>
